<template> 
	<view> 
		<view class="page"> 
			<comp-common v-bind="{data:data}"></comp-common> 
			<comp-header v-bind="{data:data}"></comp-header> 
			<view class="body after-navber"> 
				<view class="settle" v-for="(item,index) in data.settleList" :key="index"> 
					<view class="settle_status">{{item.order_status}}</view> 
					<view class="price">{{item.price}} <text class="yuan">元</text> 
					</view> 
					<view> 
						<view class="order_no_box"> 
							<text class="order_no_text">订单号</text> 
							<text class="order_no">{{item.order_no}}</text> 
						</view> 
						<view class="goods_info_box"> 
							<text class="goods_explain">商品名称</text> 
							<text class="goods_name">{{item.goods_name}}</text> 
						</view> 
					</view> 
				</view>
				<list-loading v-bind="{data:data}"></list-loading> 
 
				<view style="text-align: center;color: #888;font-size: 9pt;height: 74upx;line-height: 74upx" v-if="data.no_more">没有记录了~</view> 
				<view style="text-align: center;padding: 12upx;" :style="{visibility:loading?'visibility':'hidden'}" v-if="!data.no_more"> 
					<image :src="data.__wxapp_img.system.loading_black.url" style="width: 50upx;height: 50upx"></image> 
				</view> 
 
			</view> 
 
		</view> 
 
	</view> 
</template> 
 
<script>var myVue = {};
	import listLoading  from '../../../components/list-loading/list-loading.vue' 
	export default {
		components:{
			listLoading
		}, 
		data() { 
			return { 
				data: { 
					settle_type: "", 
					settleList: [], 
					page: 1, 
					loading: !1, 
					no_more: !1 
				}, 
			}; 
		}, 
		onLoad: function(t) {myVue = this; 
			myVue.getApp.page.onLoad(this, t); 
			this.setData({ 
				settle_type: t.settle_type 
			}), this.getSettleList(); 
		}, 
		onReady: function() { 
			myVue.getApp.page.onReady(this); 
		}, 
		onShow: function() { 
			myVue.getApp.page.onShow(this); 
		}, 
		onHide: function() { 
			myVue.getApp.page.onHide(this); 
		}, 
		onUnload: function() { 
			myVue.getApp.page.onUnload(this); 
		}, 
		onPullDownRefresh: function() { 
			myVue.getApp.page.onPullDownRefresh(this); 
		}, 
		onReachBottom: function() { 
			myVue.getApp.page.onReachBottom(this); 
			this.getSettleList(); 
		}, 
		onShareAppMessage: function() { 
			myVue.getApp.page.onShareAppMessage(this); 
		}, 
		methods: { 
			getSettleList: function() { 
				var e = this; 
				if (!e.data.loading && !e.data.no_more) { 
					e.setData({ 
						loading: !0 
					}); 
					var t = e.data.settle_type, 
						a = e.data.page; 
						e.getApp.core.showLoading({ 
						title: "正在加载", 
						mask: !0 
					}), e.getApp.request({ 
						url: e.getApp.api.store.user.settle_log, 
						data: { 
							settle_type: t, 
							page: a 
						}, 
						success: function(t) { 
							0 == t.code ? 0 < t.data.list.length ? e.setData({ 
								settleList: e.data.settleList.concat(t.data.list), 
								page: a + 1 
							}) : e.setData({ 
								no_more: !0 
							}) : e.getApp.core.showModal({ 
								title: "提示", 
								content: t.msg, 
								showCancel: !1, 
								success: function(t) { 
									t.confirm && e.getApp.core.navigateBack(); 
								} 
							}); 
						}, 
						complete: function() { 
							e.getApp.core.hideLoading(), e.setData({ 
								loading: !1 
							}); 
						} 
					}); 
				} 
			} 
		} 
 
	} 
</script> 
 
<style scoped> 
	.settle { 
		display: flex; 
		flex-direction: column; 
		padding: 0 24upx; 
		margin-top: 20upx; 
		background: #fff; 
	} 
 
	.settle .settle_status { 
		height: 64upx; 
		font-size: 13pt; 
		color: #353535; 
		display: flex; 
		align-items: center; 
		margin-top: 15upx; 
	} 
 
	.settle .price { 
		font-size: 25pt; 
		color: #353535; 
		display: flex; 
		justify-content: center; 
		border-bottom: 1px solid #e2e2e2; 
	} 
 
	.settle .yuan { 
		font-size: 13pt; 
		align-self: flex-end; 
		margin-bottom: 10upx; 
	} 
 
	.settle .order_no_box { 
		margin-top: 40upx; 
		display: flex; 
	} 
 
	.settle .order_no_text { 
		margin-right: 32upx; 
		color: #353535; 
		font-size: 13pt; 
		width: 180upx; 
		text-align: right; 
	} 
 
	.settle .order_no { 
		color: #999999; 
	} 
 
	.settle .goods_info_box { 
		margin-top: 24upx; 
		display: flex; 
	} 
 
	.settle .goods_explain { 
		margin-right: 32upx; 
		color: #353535; 
		font-size: 13pt; 
		width: 180upx; 
		text-align: right; 
	} 
 
	.settle .goods_name { 
		flex: 1; 
		overflow: hidden; 
		text-overflow: ellipsis; 
		display: -webkit-box; 
		-webkit-line-clamp: 2; 
		-webkit-box-orient: vertical; 
		color: #999999; 
		margin-bottom: 40upx; 
	} 
</style>
